<template>
  <div class="search-block">
    <SearchHeader hide-btn>
      <SearchInput
        slot="extra"
        :search-value.sync="user_input"
        v-on:clearKey="clearKey"
        v-on:cancel="cancel"
        @focus="changeFocus"
        transparent
        disable-fouce
        placeholder="搜索标题"
      />
    </SearchHeader>

    <div class="content">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <div class="history_title">
            <p>
              <i
                style="font-size: 16px;"
                class="jeicon jeicon-history"
              />
              最近搜索
            </p>
            <i
              @tap="deletels"
              style="font-size: 16px;"
              class="jeicon jeicon-trash-o je-audio-btn"
            />
          </div>
          <div class="btns">
            <button
              v-for="(item,index) in history_list"
              @tap="chooseHistory(item,index)"
              :key="index"
              :class="clickIndex === index ? 'choosed' : ''"
              type="button"
              class="mui-btn je-audio-btn"
            >
              {{ item }}
            </button>
          </div>
        </li>
      </ul>

      <div
        v-show="showBottomBtn"
        class="handleBtns"
      >
        <div class="buttons">
          <button
            @tap="reset"
            type="button"
            class="mui-btn mui-btn-primary je-audio-btn reset"
          >
            重置
          </button>
          <button
            @tap="handleSelectValue"
            type="button"
            class="mui-btn mui-btn-primary je-audio-btn submit"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import SearchHeader from '@/components/searchHeader';
import SearchInput from '@/components/searchInput';

export default {
  components: {
    SearchHeader, SearchInput,
  },
  data() {
    return {
      user_input: '',
      dtPicker: null,
      history_list: [],
      showBottomBtn: true,
      screenHeight: document.documentElement.clientHeight || document.body.clientHeight,
      tabValue: '',
    };
  },
  watch: {
    user_input(nv) {
      if (nv) {
        this.user_input = nv;
      }
    },
    screenHeight: {
      handler(nv, ov) {
        if (nv && ov && nv < ov) {
          this.showBottomBtn = false;
        } else {
          this.showBottomBtn = true;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // plus.webview.currentWebview().setStyle({
    //   softinputMode: 'adjustResize', // 弹出软键盘时自动改变webview的高度
    // });
    // 获取本地存储的搜索历史
    if (JE.getLSItem(`${JE.getCurrentUser().zhId}_${JE.getCurrentUser().userCode}_trans_search`)) {
      this.history_list = JSON.parse(JE.getLSItem(`${JE.getCurrentUser().zhId}_${JE.getCurrentUser().userCode}_trans_search`));
    }
  },
  mounted() {
    Waves.init();
    const that = this;
    window.onresize = () => (() => {
      that.screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
    })();
    const key = this.$route.query && this.$route.query.key;
    const tabValue = this.$route.query && this.$route.query.tabValue;
    this.tabValue = tabValue;
    this.user_input = key;
  },
  methods: {
    // 监听 清除按钮事件
    clearKey() {
      this.user_input = '';
    },
    // 选择历史，将用户选择选项置至最后一位
    chooseHistory(item, index) {
      this.user_input = item;
      this.history_list.splice(index, 1);
      this.history_list.unshift(this.user_input);
    },
    // 返回上级页面  查询
    handleSelectValue() {
      Waves.attach('.submit');
      this.user_input = this.user_input.trim();
      // 先保存在本地
      if (this.user_input) {
        // 判断如果用户输入跟历史条件一致，则执行选择历史操作
        if (this.history_list.indexOf(this.user_input) > -1) {
          this.chooseHistory(this.user_input, this.history_list.indexOf(this.user_input));
        } else {
          this.history_list.unshift(this.user_input);
        }
        // 只存储最近搜索的十个
        if (this.history_list.length > 10) {
          this.history_list.pop();
        }
        JE.setLSItem(`${JE.getCurrentUser().zhId}_${JE.getCurrentUser().userCode}_trans_search`, JSON.stringify(this.history_list));
      }
      this.$router.push({
        path: '/JE-PLUGIN-TRANSACTION/list',
        query: {
          type: 'userInput',
          user_input: this.user_input,
        },
      });
      this.$router.replace({
        path: '/JE-PLUGIN-TRANSACTION/list',
        query: {
          type: 'userInput',
          user_input: this.user_input,
        },
      });
      // const parent = plus.webview.currentWebview().opener();
      // mui.fire(parent, 'userInput', this.user_input);
      // debugger;
      // console.log(this.$router);

      // sessionStorage.setItem('user_input', this.user_input);
      // sessionStorage.setItem('tabValue', this.tabValue);
      // this.$router.go(-1);

      // debugger;
      // mui.back();
    },
    // 重置
    reset() {
      Waves.attach('.reset');
      this.user_input = '';
    },
    // 点击取消
    cancel() {
      mui.back();
    },
    // 输入框得到焦点隐藏底部按钮，失焦100毫秒后显示底部按钮
    changeFocus(item) {
      if (!item) {
        return setTimeout(() => {
          this.showBottomBtn = !item;
        }, 100);
      }
      this.showBottomBtn = !item;
    },
    // 清空搜索历史
    deletels() {
      const btnArray = ['取消', '确定'];
      mui.confirm('确定清空最近搜索吗?', '提示', btnArray, (e) => {
        if (e.index === 1) {
          JE.setLSItem(`${JE.getCurrentUser().zhId}_${JE.getCurrentUser().userCode}_trans_search`);
          this.history_list = [];
        }
      });
    },
  },
};
</script>
<style lang="less" >
@import "~@/theme/index.less";
.search-block .jeicon {
  font-size: 18 * @hd;
}
</style>
<style lang="less" scoped>
@import "~@/theme/index.less";
.content {
  position: relative;
  top: 45 * @hd;
  width: 100%;
  // bottom: 0;
  left: 0;
  background-color: #fff;
  .handleBtns {
    position: fixed;
    left: 0;
    bottom: 50 * @hd;
    width: 100%;
    .buttons {
      display: flex;
      align-items: center;
    }

    .mui-btn {
      padding-top: 9px;
      margin: 10 * @hd 30 * @hd;
      flex: 1;
    }
  }
  .history_title {
    font-size: 13 * @hd;
    display: flex;
    justify-content: space-between;
  }
  .btns {
    padding-top: 10px;
    .mui-btn {
      padding: 8px 25 * @hd 4px;
      border-color: #ececec;
      margin-right: 20 * @hd;
      margin-bottom: 10 * @hd;
      background-color: #ececec;
    }
    .choosed {
      color: #536dfe;
      background-color: #dce1fe;
      border-color: #dce1fe;
    }
  }
  .mui-table-view-cell {
    font-size: 16 * @hd;
    .mui-input-group {
      .mui-input-row {
        height: 50 * @hd;
        border: 1px solid #f2f2f2;
        margin: 8px 0;
      }
      .col-label {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 15 * @hd;
      }
      .jeicon {
        position: absolute;
        right: 9 * @hd;
        top: 50%;
        margin-top: -20 * @hd;
        color: #ccc;
        padding: 10px 6px;
        z-index: 1000;
        font-size: 22 * @hd;
      }
      .mui-input-row:after {
        height: 0;
      }
    }
    &.mui-active {
      background-color: #fff;
    }
  }
  .mui-table-view-cell:after {
    height: 0;
  }
  .mui-table-view:after,
  .mui-table-view:before {
    height: 0;
  }
}
</style>
